<template>
  <div>
    <div class="search-title">
      <el-form ref="formName" :model="ruleForm" class="form-inline" size="small">
        <el-form-item label="品牌名称" prop="brandName">
          <el-select v-model="ruleForm.brandName" filterable placeholder="请选择" clearable>
            <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="初始金额" prop="beginEstimateMoney">
          <el-input-number v-model="ruleForm.beginEstimateMoney" controls-position="right"
            :step-strictly="true"></el-input-number>
        </el-form-item>
        <el-form-item label="结束金额" prop="endEstimateMoney">
          <el-input-number v-model="ruleForm.endEstimateMoney" controls-position="right"
            :step-strictly="true"></el-input-number>
        </el-form-item>
        <el-form-item label="条件筛选" prop="caseNumber">
          <el-input v-model="ruleForm.caseNumber" placeholder="请输入报案号/车牌号/修理厂名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
        </el-form-item>
        <el-form-item>
        </el-form-item>
      </el-form>
    </div>
    <div class="sear-btn">
      <el-button type="primary" round plain size="small" @click="resetForm()">重置</el-button>
      <el-button type="primary" round size="small" @click="searchCaseList()">搜索</el-button>
    </div>
    <div class="down-btn">
      <button>批量调度</button>
    </div>
    <el-table :data="tableData" :height="tableHeight" style="width: 100%;" v-loading="tableLoading">
      <el-table-column prop="caseNumber" label="报案号" header-align="center" align="center" width="120">
      </el-table-column>
      <el-table-column prop="carNumber" label="车牌号" header-align="center" align="center">
      </el-table-column>
      <el-table-column prop="userName" label="渠道名称" header-align="center" align="center" width="120">
      </el-table-column>
      <el-table-column prop="brandName" label="品牌名称" header-align="center" align="center">
      </el-table-column>
      <el-table-column prop="surveyor" label="查勘员姓名" header-align="center" align="center">
      </el-table-column>
      <el-table-column prop="surveyorNumber" label="查勘员工号" header-align="center" align="center">
      </el-table-column>
      <el-table-column prop="estimateMoney" label="估损金额" width="80" header-align="center" align="center">
      </el-table-column>
      <el-table-column prop="createTime" label="日期时间" width="100" header-align="center" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button @click="showCasedialog(scope.row)" type="text" size="small">详情</el-button>
          <el-button @click="showAssignDialog(scope.row)" type="text" size="small">指派</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="ruleForm.currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="ruleForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 详情 -->
    <case-detail ref="caseDetail" />
    <!-- 调度记录 -->
    <assign ref="assign" :assign-info="assignInfo" @search-list="searchCaseList" />

  </div>
</template>
<script>
import { mapState } from 'vuex'
import assign from './components/assign.vue'
import caseDetail from './components/caseDetails.vue'
import { updatePictureStatus } from '@/api/caseExtend'
import { getBrandList, getStayTask } from '@/api/newRules'
export default {
  components: { caseDetail, assign },
  data() {
    return {
      tableLoading: false,
      tableData: [],
      total: 0,
      tableHeight: window.innerHeight - 420,
      assignInfo: {},
      ruleForm: {
        pageSize: 10,
        currentPage: 1,
        brandName: '',
        beginEstimateMoney: 0,
        endEstimateMoney: 999999999,
        caseNumber: '',
      },
      brandList: []
    }
  },
  created() {
    this.getBrandList()
    this.searchCaseList()
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    searchCaseList() {
      this.tableLoading = true
      this.ruleForm.groupName = this.userInfo.group
      // this.ruleForm.seatId = this.userInfo.userId
      this.ruleForm.pageCount = this.ruleForm.pageSize.toString()
      this.ruleForm.pageNum = this.ruleForm.currentPage.toString()
      this.ruleForm.brandId = this.ruleForm.brandName
      let formObj = JSON.parse(JSON.stringify(this.ruleForm))
      formObj.beginEstimateMoney = formObj.beginEstimateMoney + ''
      formObj.endEstimateMoney = formObj.endEstimateMoney + ''
      getStayTask(formObj).then(res => {
        this.tableLoading = false
        if (res.sts === '0') {
          this.tableData = res.stayTaskList
        }
        this.total = res.totalCount
      })
    },
    updatePictureStatus(taskId) {

      this.$confirm('确认重置图片状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updatePictureStatus({ taskId: taskId }).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
      })
    },
    showCasedialog(item) {
      this.caseDialog = true
      this.$nextTick(() => {
        this.$refs.caseDetail.getCaseInfo(item);

      })
    },
    resetForm() {
      this.ruleForm = {
        pageSize: 10,
        currentPage: 1,
        brandName: '',
        beginEstimateMoney: 0,
        endEstimateMoney: 999999999,
        caseNumber: '',
      }
    },
    showAssignDialog(caseInfo) {
      this.assignDialog = true;
      this.$refs.assign.showDialog()
      this.assignInfo = { ...caseInfo };
      this.assignInfo.accidentLabel = caseInfo.accidentType == "1" ? '水淹' : caseInfo.accidentType == "2" ? '火烧' : caseInfo.accidentType == "3" ? '碰撞' : ''
      this.assignInfo.cartLabel = caseInfo.carType == "1" ? '商用车' : caseInfo.carType == "2" ? '乘用车' : ''
    },
    handleSizeChange(val) {
      this.ruleForm.pageSize = val
      this.searchCaseList()
    },
    handleCurrentChange(val) {
      this.ruleForm.currentPage = val
      this.searchCaseList()
    },
    // 获取品牌名称list
    getBrandList() {
      const params = {
        userId: this.userInfo.userId,
        groupId: this.userInfo.group,
      }
      getBrandList(params).then(res => {
        if (res.sts === '0') {
          var brandObj = res.brandList
          for (var key in brandObj) {
            var cell = new Object();
            cell.value = key;
            cell.label = brandObj[key];
            this.brandList.push(cell);
          }
        }
      })
    },
  }
}
</script>
<style lang='scss' scoped>
.form-inline {
  display: flex;
  flex-wrap: wrap;
}

.form-inline .el-form-item {
  width: calc(100% / 3);
  margin: 0 auto;
  padding: 10px 20px;
}

::v-deep .form-inline .el-form-item .el-form-item__label {
  margin-left: 5%;
}

.form-inline .el-form-item .el-input,
.form-inline .el-form-item .el-select,
.el-input-number--small {
  width: 65%;
}

.sear-btn,
.down-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sear-btn .el-button {
  padding: 8px 35px;
  margin: 10px 40px 0 0;
}

.down-btn {
  justify-content: flex-end;
}

.down-btn button {
  height: 28px;
  line-height: 28px;
  background: none;
  border: 0;
  border-radius: 16px;
  outline: none;
  margin: 20px 20px 10px 6px;
  font-size: 14px;
  color: #409EFF;
}

.el-pagination {
  display: flex;
  justify-content: flex-end;
  padding: 10px 20px;
}

::v-deep .el-table tbody td .cell:empty::after {
  content: '— —' !important;
}
</style>
